<template>
	<view class="content">
		<view class="header" :style="{backgroundImage:`url(${src})`}">
			<view class="title">
				<image class="titleImg" src="/static/image/mine/price.png" mode=""></image>
			</view>
			<view class="flexcenter margin_top">
				<view class="flexleft margin_right5">
					<image class="platImg margin_right1" src="/static/image/shop/platLeft.png" mode=""></image>
					<view class="text_a color">
						支付平台会费
					</view>
				</view>
				<view class="flexleft">
					<view class="text_a color margin_right1">
						尊享优质服务
					</view>
					<image class="platImg" src="/static/image/shop/platRight.png" mode=""></image>
				</view>
			</view>
			<view class="textBox">
				<view class="textnav">
					<view class="flexleft margin_right2">
						<view class="imgBox">
							<image src="/static/image/mine/huang.png" mode=""></image>
						</view>
						<view class="price">
							平台费
						</view>
					</view>
					<!-- <view class="line"></view> -->
					<view class="flexleft">
						<!-- <view class="text_pee margin_right2" style="color: #F3271C;">
							将会在2022年12月29日到期
						</view> -->
						<view class="button">
							{{info.is_vip==1?"已开通":"暂未开通"}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="platInfo text">
			<view class="flexcenter">
				<image class="platInfoImg" src="/static/image/shop/platInfoImg.png" mode=""></image>
				<view class="color_san platInfoTitle">
					会员尊享权益
				</view>
				<image class="platInfoImg" src="/static/image/shop/platInfoImg.png" mode=""></image>
			</view>
			<view class="margin_top4 color_san text_a">
				开通会员后可享受我们所有服务，服务响应更快，您能获得更优质的服务和体验！
			</view>
			<view class="flexcenter" style="margin-top: 100rpx;">
				<image class="platInfoImg" src="/static/image/shop/platInfoImg.png" mode=""></image>
				<view class="color_san platInfoTitle">
					会员套餐费用
				</view>
				<image class="platInfoImg" src="/static/image/shop/platInfoImg.png" mode=""></image>
			</view>
			<view class="flexleft flex_wrap">
				<view class="selectBox margin_top" v-for="(item,index) in cardList" :key="item.id">
					<view :class="item.is_checked?'select':'noSelect'" @click="selectCard(item)">
						<view class="text_x">
							{{item.name}}
						</view>
						<view class="flexcenter margin_top7">
							<text :class="item.is_checked?'symbol color_theme':'symbol'">￥</text>
							<text :class="item.is_checked?'symbolPrice color_theme':'symbolPrice'">{{item.price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer ffffff padding">
			<view class="footerButton" @click="goPayment">
				开通/续订
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				src: require('@/static/image/shop/platformBg.png'),
				info: {},
				cardList: [], //套餐列表
				vip_card_id: "", //套餐id
				vip_card_price: "", //套餐价格
			}
		},
		onLoad() {
			this.getMember()
		},
		methods: {
			getMember() { //会员信息
				let _this = this
				httpRequest.request('/api/shop.index/card_show', 'GET', {

				}, false, false, true).then(res => {
					res.data.card_data.forEach(item => {
						_this.$set(item, "is_checked", false)
					})
					_this.info = res.data
					_this.cardList = res.data.card_data
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			selectCard(item) { //选择套餐
				this.cardList.forEach(item => {
					item.is_checked = false
				})
				item.is_checked = true
				this.vip_card_id = item.id
				this.vip_card_price = item.price
			},
			goPayment() { //支付
				if (!this.vip_card_id) {
					httpRequest.toast("请先选择套餐哦！");
					return false
				}
				uni.navigateTo({
					url: "/pages_mine/payment?id=" + this.vip_card_id + "&price=" + this.vip_card_price
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 头部
	.header {
		// background-image: url('/static/image/shop/platformBg.png');
		background-size: 100% 100%;
		width: 100%;
		height: 551.88rpx;
		padding-top: 125rpx;
		position: relative;

		.title {
			display: flex;
			justify-content: center;
		}

		.titleImg {
			width: 568rpx;
			height: 175rpx;
		}

		.platImg {
			width: 30rpx;
			height: 16rpx;
		}
	}

	.textBox {
		position: absolute;
		top: 400rpx;
		left: 30rpx;
		right: 30rpx;
		z-index: 90;

		.textnav {
			margin: 0 auto;
			padding: 50rpx 40rpx;
			background: rgba(255, 255, 255, 0.4);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			display: flex;
			justify-content: space-between;
			border: 2rpx solid #FFFFFF;
		}

		.imgBox {
			width: 54rpx;
			height: 44rpx;
			margin-right: 10rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.price {
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 0rpx;
			// letter-spacing: 50rpx;
		}

		.line {
			width: 0;
			height: 17rpx;
			opacity: 0.3;
			border-right: 2rpx solid #4E2809;
			margin-right: 20rpx;
		}

		.button {
			width: 140rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			background: linear-gradient(90deg, #FF5950 0%, #FF0D00 100%);
			border-radius: 999rpx 999rpx 999rpx 999rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.nav_a {
			text-align: center;
			padding: 0;
		}

		.text_2 {
			font-size: 26rpx;
			color: #666;
		}
	}

	.platInfo {
		margin-top: 100rpx;
		padding-bottom: 200rpx;

		.platInfoImg {
			width: 37.9rpx;
			height: 18.38rpx;
		}

		.platInfoTitle {
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			margin: 0 10rpx;
		}
	}

	.selectBox {
		width: 33.3%;
		display: flex;
		justify-content: center;
	}

	.noSelect {
		width: 210rpx;
		height: 220rpx;
		text-align: center;
		background: #F6F6F6;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 3rpx solid #F6F6F6;
		box-sizing: border-box;
		padding: 20rpx;
		color: #333333;
	}

	.select {
		width: 210rpx;
		height: 220rpx;
		text-align: center;
		background: rgba(255, 23, 11, 0.1);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 3rpx solid #FF170B;
		box-sizing: border-box;
		padding: 20rpx;
		color: #FF170B;
	}

	.color_theme {
		color: #FF170B !important;
	}

	.symbol {
		font-size: 24rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		color: #929292;
	}

	.symbolPrice {
		font-size: 50rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		color: #929292;
	}
</style>